<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 虚拟DOM 就是用 js对象 模拟的真实DOM
    {
      tag:'div',
      props:{id:'app'},
      children:null
    }
  -->
  <div id="app">
    <!-- 小胡子当中 写的都是能够在实例上调用到的属性  只能写表达式 不能写语句 -->
    <!--  凡是 v-xxx的行内属性 统称为vue指令  指令后面跟的语法等同于 {{}}-->
    <!-- v-text相当于 innerText    v-html相当于 innerHTML-->
    <h1>{{name+age}}</h1>
    <h2 v-text='sc'></h2>
    <h2 v-html='sc'></h2>
    <!-- v-model  把变量对应的值 赋给input的value属性  
      绑定了input框的input事件 当input事件触发的时候 会把新值再赋给 name这个变量-->
      <!-- v-model主要用在表单元素上 -->
    <input type="text" v-model='name'> 

    <!-- v-bind是专门用来处理行内属性的一个指令 简写 : -->
    <img v-bind:src="url" alt="">
    <img :src="url" alt="">
  </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
    el:'#app',
    data:{
      name:'<i>123</i>',
      age:456,
      sc:'<script> alert(123) <\/script>',
        url:'https://cn.vuejs.org/images/logo.png'
    }
  });
  console.log(vm)
</script>